<template>
  <div class="chart-wrapper clearfix">
    <div class="chart-swiper fl">
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <a href="javascript:void(0)" @click="changeView(0)">
              <i class="iconfont">&#xe770;</i>
              <p>全市能源结构</p>
            </a>
            <a href="javascript:void(0)" @click="changeView(5)">
              <i class="iconfont">&#xe644;</i>
              <p>工业总能耗占比</p>
            </a>

            <a href="javascript:void(0)" @click="changeView(7)">
              <i class="iconfont">&#xe686;</i>
              <p>重点用能单位</p>
            </a>
            <a href="javascript:void(0)" @click="changeView(3)">
              <i class="iconfont">&#xe646;</i>
              <p>高耗能行业</p>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:void(0)" @click="changeView(1)">
              <i class="iconfont">&#xe644;</i>
              <p>各区能耗对比</p>
            </a>
            <a href="javascript:void(0)" @click="changeView(4)">
              <i class="iconfont">&#xe74e;</i>
              <p>工业增加值能耗</p>
            </a>

            <a href="javascript:void(0)" @click="changeView(6)">
              <i class="iconfont">&#xe60e;</i>
              <p>规模以上工业企业</p>
            </a>
            <a href="javascript:void(0)" @click="changeView(2)">
              <i class="iconfont">&#xe60e;</i>
              <p>电力行业企业</p>
            </a>
          </div>
          <div class="swiper-slide">
            <a href="javascript:void(0)" @click="changeView(8)">
              <i class="iconfont">&#xe662;</i>
              <p>产业能耗占比</p>
            </a>
          </div>
        </div>
      </div>
      <div class="swiper-pagination"></div>
    </div>

    <div class="chart-detail fr">
      <div
        class="chart-detail-select"
        v-show="ReportArr[report_index] == 'gaonenghaohangye'"
      >
        <el-select
          v-model="TabSelectedIndex"
          placeholder="请选择"
          @change="handleTab(TabSelectedIndex)" class="_gaonenghaohangye"
        >
          <el-option label="总能耗趋势" value="1"> </el-option>
          <el-option label="能耗占比趋势" value="2"> </el-option>
          <el-option label="各区占比趋势" value="3"> </el-option>
        </el-select>
      </div>
      <div style="height: 100%">
        <keep-alive>
          <component :is="select_report" :tabIndexVal="tabIndex"></component>
        </keep-alive>
      </div>

      <div class="chart-detail-txt">
        数据来源：深圳节能在线<span>发布日期：2021-07-06</span>
      </div>
    </div>
  </div>
</template>
<script>
import gaonenghaohangye from "../../components/index_report/gaonenghaohangye";
import quanshinengyuanjiegou from "../../components/index_report/quanshinengyuanjiegou";
import dianlihangye from "../../components/index_report/dianlihangye";
import gequnenghaoduibi from "../../components/index_report/gequnenghaoduibi";
import zongliangqushi from "../../components/index_report/zongliangqushi";
import nenghaoduibi from "../../components/index_report/nenghaoduibi";
import chanyenenghao from "../../components/index_report/chanyenenghao";
import guimoyishang from "../../components/index_report/guimoyishang";
import zhongdianyongneng from "../../components/index_report/zhongdianyongneng";

export default {
  name: "ReportArea",
  data() {
    return {
      report_index: -1, //图表选择样式
      select_report:"",
      tabIndex: 1, //当前下来选择
      //图表数组
      ReportArr: [
        "quanshinengyuanjiegou",
        "gequnenghaoduibi",
        "dianlihangye",
        "gaonenghaohangye",
        "zongliangqushi",
        "nenghaoduibi",
        "guimoyishang",
        "zhongdianyongneng",
        "chanyenenghao",
      ],
      //下拉选择的项
      TabSelectedIndex: "1"
    };
  },
  components: {
    quanshinengyuanjiegou,
    dianlihangye,
    gaonenghaohangye,
    gequnenghaoduibi,
    zongliangqushi,
    nenghaoduibi,
    chanyenenghao,
    guimoyishang,
    zhongdianyongneng,
  },
  mounted() {


    //初始化swiper
    this.$nextTick(() => {
      var swiperChart = new Swiper(".chart-swiper .swiper-container", {
        slidesPerView: 2,
        slidesPerGroup: 1,
        spaceBetween: 10,
        pagination: {
          el: ".chart-swiper .swiper-pagination",
          clickable: true,
        },
      });
      for (let i = 0; i < swiperChart.pagination.bullets.length; i++) {
        swiperChart.pagination.bullets[i].onmouseover = function () {
          this.click();
        };
      }
      //初始图表显示
      this.report_index=0;
  
    });

  },
  methods: {
    changeView(index) {
      this.tabIndex = 1;
      this.report_index = index;
      this.TabSelectedIndex = "1";
    },

    handleTab(index) {
      this.tabIndex = index-0;
    },
  },
 /* computed: {
    currentView() {
      console.log("currentView");
      return this.ReportArr[this.report_index];
    },
  },*/
  watch:{
    report_index(val,old_val)
    {
      this.select_report=this.ReportArr[val];
    }

  }
};
</script>
<style lang="less">
  .chart-wrapper {
    height: 406px;
    margin-top: 24px;


    ._gaonenghaohangye {
      .el-input__inner {
        height: 28px;
        border-radius: 0px;
        font-weight: bold;
        cursor: pointer;
        background-color: #8fc1fe;
        color: #233c8b;
        border: 0px;
      }

      .el-input__icon {
        line-height: 28px;
      }

      .el-input__suffix {
        background-color: #4570d8;
        right: 0px;

        .el-select__caret {
          color: #fff;
        }
      }
    }
  }



  .chart-detail-select {
    position: absolute;
    top: 0;
    right: 0;
    width: 154px;
    height: 28px;
    background: #8fc1fe;
    color: #233c8b;
    font-size: 12px;
    line-height: 28px;
    z-index: 3;

    .el-scrollbar__view {
      background-color: #8fc1fe;

      .el-select-dropdown__item {
        color: #233c8b;
        font-weight: bold;
        border: 0px;
      }

    }

    .el-select-dropdown {
      border: 0px;

      .popper__arrow::after {
        border-bottom-color: #8fc1fe !important;
      }
    }
  }

  .chart-detail-select p {
    font-weight: bold;
    padding-left: 18px;
    cursor: pointer;
    position: relative;
  }

  .chart-detail-select p:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    background: #4570d8;
    z-index: 0;
  }

  .chart-detail-select p:before {
    content: "";
    display: block;
    position: absolute;
    top: 11px;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 6px solid #fff;
    z-index: 1;
  }

  .chart-detail-select ul {
    position: absolute;
    top: 28px;
    left: 0;
    width: 100%;
    background: #fff;
    display: none;
  }

  .chart-detail-select ul li {
    cursor: pointer;
    padding-left: 18px;
  }

  .chart-detail-select ul li:hover {
    background: #233c8b;
    color: #fff;
  }

  .chart-detail-tit {
    color: #fff;
    text-align: center;
    line-height: 1.5;
  }

  .chart-detail-tit .tit {
    font-size: 16px;
    font-weight: bold;
  }

  .chart-detail-tit .sub {
    font-size: 14px;
  }

#main {
  height: 90%;
}
</style>